<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>云+-首页</title>
<link rel="stylesheet" href="lib/amazeui/assets/css/amazeui.css" />
<link rel="stylesheet" href="css/hp.css" />

<script src="lib/amazeui/assets/js/jquery.min.js"></script> 
<script src="lib/layer/layer.js"></script>
<script src="lib/amazeui/assets/js/amazeui.js"></script> 
<script src="lib/amazeui/pagination/amazeui-pagination.js"></script>

</head>
<body>
	<div class="hp-container">
        <!--  导航-->
		<%@include file="/WEB-INF/page/layout_front/navigation.jsp"%><!--静态包含-->
		<!-- head -->
		<%@include file="/WEB-INF/page/layout_front/head.jsp"%><!--静态包含-->

		<div class="hp-body-area">
			<div class="am-g">
				<ul id="city_file" class="am-avg-lg-4 am-thumbnails" >
					<c:forEach items="${page.list}" var="item">
						<li id="city_deail_list" class="hp-home-img-item" jh="${item.city.id }">
							<div class="hp-img">
								<a href="houseAction_detail_house.hp?id=${item.id}">
								 <img style="width: 412px;height: 312px" class="am-thumbnail" src="${item.img_url }" />
								</a>
								<div>
									<div class="hp-fl">
										<div>
											<a href="houseAction_detail_house.hp?id=${item.id}">
												<span class="hp-home-title">${item.title }</span>
											</a>
										</div>
										<div>
											<span class="hp-home-type-mark">${item.conditions }/${item.house_type }/${item.appraise_count }人点评<span
												class="hp-home-price">${item.price }/${item.price_unit }</span></span>
										</div>
									</div>
									<div class="hp-fr hp-am-circle-img">
										<!-- 房主头像 -->
										<img src="${item.user.img_url }"
											class="am-circle hp-am-circle" />
									</div>
								</div>
							</div>
						</li>
					</c:forEach>
				</ul>
			</div>
			<!-- 分页位标  区域  -->
			<div class="am-g am-cf">
				<div class="am-container">
					<ul class="am-pagination ">
					</ul>
				</div>
			</div>
			<!-- 分页位标  区域   end-->
		</div>

	</div>
	  <script type="text/javascript">
   
   // 初始化 分页组件
  var pagination = new Pagination({
  	  wrap: $('.am-pagination'), // 存放分页内容的容器
  	  count: parseInt('${page.pages}'), // 总页数
  	  current: parseInt('${page.pageNum}'), // 当前的页数（默认为1）
  	  prevText: '上一页', // prev 按钮的文本内容
  	  nextText: '下一页', // next 按钮的文本内容
  	  callback: function(pageNum) { // 每一个页数按钮的回调事件
  		  location.href='houseAction_list_house.hp?pageNum='+pageNum;
  		  /*  alert(pageNum) */
  	  }
  	});
   </script>
	<script>
	//js实现筛选
	/* $("#city_list li a").click(function(){
		 	//$(this).siblings().hide();
		 	//alert($(this).attr("jh"));
		 	var this_jh=$(this).attr("jh");
		 	var house_city_id = $("#city_deail_list").attr("jh");
		 	if (this_jh==house_city_id) {
		 		$("li").not( $("#city_deail_list")[0] )
			}
		 }) */
	</script>

</body>

</html>